<template>

  <el-dialog :title="id == null ? '添加' : '编辑'" :visible.sync="dialogVisible" :close-on-click-modal="false" width="900px">

    <el-form ref="main-form" status-icon :model="mainQuery" :rules="rules" label-width="120px" label-position="left" :inline="false" style="width: 400px;" size="mini">

      <el-form-item label="邮件主题" size="mini" prop="subject">
        <el-input placeholder="" v-model="mainQuery.subject" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>
      <el-form-item label="邮件模板" size="mini">
        <el-button type="default" icon="el-icon-edit" @click="$refs['dialog-editor'].show(mainQuery.mailBody)">编辑邮件模板</el-button>
      </el-form-item>

      <el-form-item label="发送类型" prop="">
        <el-select v-model="mainQuery.type" placeholder="请选择" clearable>
          <el-option v-for="item in sendTypeOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>

      <!--  <el-form-item label="ID" size="mini" v-if="id != null">
          <el-input placeholder="" onfocus="this.select()" v-model="id" readonly></el-input>
        </el-form-item>

        <el-form-item label="邮件类型名称" size="mini" prop="name">
          <el-input placeholder="" v-model="mainQuery.name" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>
      


        <el-form-item label="接收者" prop="">
          <el-radio-group v-model="mainQuery.targetType">
            <el-radio v-for="item in targetTypeOptions" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="状态" prop="">
          <el-radio-group v-model="mainQuery.status">
            <el-radio v-for="item in statusOptions" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="修改时间" size="mini" v-if="data != null">
          <span>{{data.updateTime}}</span>
        </el-form-item>
        <el-form-item label="创建时间" size="mini" v-if="data != null">
          <span>{{data.createTime}}</span>
        </el-form-item>

        <el-form-item label="邮件附带信息" size="mini">
          <el-button type="success" icon="el-icon-plus" v-if="!mainQuery.emailSubInfoId" @click="$refs['dialog-select-subinfo'].show()">关联附带信息</el-button>
          <el-button type="default" icon="el-icon-edit" v-else @click="$refs['dialog-select-subinfo'].show()">关联附带信息</el-button>
        </el-form-item> -->

    </el-form>

    <dialog-select-subinfo ref="dialog-select-subinfo" @on-select="onSelectSubInfo"></dialog-select-subinfo>
    <dialog-editor ref="dialog-editor" @on-confirm="onConfirmMailBody"></dialog-editor>

    <!-- <template>
        <el-table
          :data="emailSubInfoList"
          style="width: 100%">
          <el-table-column prop="tel" label="tel" ></el-table-column>
          <el-table-column prop="fax" label="fax" ></el-table-column>
          <el-table-column prop="email" label="email" ></el-table-column>
          <el-table-column prop="replyEmail" label="replyEmail" ></el-table-column>
          <el-table-column prop="helpWebsite" label="helpWebsite" ></el-table-column>
          <el-table-column prop="website" label="website" ></el-table-column>
          <el-table-column prop="strStatus" label="状态" ></el-table-column>
        </el-table>
      </template> -->

    <div slot="footer" class="dialog-footer">

      <!-- <el-popover
          v-if="id != null"
          placement="top"
          width="160"
          v-model="popDeleteVisible">
          <p>确定删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="default" @click="popDeleteVisible = false">取消</el-button>
            <el-button type="danger" size="mini" @click="submitDel">确定</el-button>
          </div>
          <el-button type="danger" slot="reference"  size="small" style="float: left;" :loading="loading">删 除</el-button>
        </el-popover> -->

      <el-button @click="close" size="mini">取 消</el-button>
      <el-button @click="submit" size="mini" type="primary" :loading="loading">提 交</el-button>
    </div>
  </el-dialog>

</template>

<script>

import ApiMain from '@/api/email.type';

import DialogSelectSubInfo from './dialog-select-subinfo';
import DialogEditor from './dialog-editor';

export default {
  mixins: [
  ],
  props: [
    'targetTypeOptions',
    'sendTypeOptions',
    'statusOptions',
  ],
  components: {
    'dialog-select-subinfo': DialogSelectSubInfo,
    'dialog-editor': DialogEditor,
  },
  data() {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,

      dialogSelectSubInfoVisible: true,

      mainQueryRaw: null,
      mainQuery: {
        subject: '',
        type: '',
        mailBody:''
      },

      emailSubInfoList: [],

      rules: {
        subject: [
          { required: true, message: '请输入邮件主题', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择状态', trigger: 'blur' },
        ],
      },

      id: null,
      data: null,
    }
  },
  mounted() {
    this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {

    onSelectSubInfo(data) {
      this.emailSubInfoList = [];
      this.emailSubInfoList.push(data);
      this.mainQuery.emailSubInfoId = data.id;
    },

    onConfirmMailBody(value) {
      this.mainQuery.mailBody = value;
    },

    show(id = null) {

      this.reset();

      if (id) {
        this.id = id;
        this.fetchData().then(() => {
          this.fetchSubInfo();
        });
      }

      this.dialogVisible = true;
    },

    close() {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset() {
      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.$refs['main-form'] && this.$refs['main-form'].resetFields();
      this.id = null;
      this.data = null;

      this.emailSubInfoList = [];
    },

    async fetchData() {

      try {
        var re = await ApiMain.info({ id: this.id });
        this.data = re;
      } catch (err) {
        this.data = null;
      }

      if (this.data) {
        for (var k in this.mainQuery) {
          this.mainQuery[k] = this.data[k];
        }
      }

    },

    async fetchSubInfo() {

      this.emailSubInfoList = [];

    },

    verifyForm() {

      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit() {

      if (!this.verifyForm()) return false;

      this.loading = true;

      try {
        this.id ? await this.submitSet() : await this.submitAdd();
      } catch (err) { }

      this.loading = false;
    },

    async submitAdd() {
      await ApiMain.add(this.mainQuery);
      this.$message({ message: '添加成功', type: 'success' });
      this.close();
    },

    async submitSet() {
      var req = Object.copy(this.mainQuery);
      req.id = this.id;

      await ApiMain.set(req);
      this.$message({ message: '修改成功', type: 'success' });
      this.close();
    },

    async submitDel() {
      this.popDeleteVisible = false;
      this.loading = true;

      try {
        await ApiMain.del({ id: this.id });
        this.$message({ message: '删除成功', type: 'success' });
        this.close();
      } catch (e) {
      }

      this.loading = false;
    },
  }
}
</script>

<style>
</style>
